<!--代理商-->
<template>
  <page-header-wrapper
    :title="false">
    <a-card :loading="loading" :bordered="false">
      <div class="table_header" style="display: flex;justify-content: space-between;padding-right: 20px ">
        <div>
          <a-button type="primary" icon="plus" @click="addUser">
            新建
          </a-button>
          <a-button icon="delete" :disabled="isOpenExport" style="margin-left: 10px" @click="deleteRouter">
            删除api
          </a-button>
          <a-button icon="disconnect" :disabled="isOpenExport" style="margin-left: 10px" @click="closeRule">
            暂停api
          </a-button>
          <a-button icon="link" :disabled="isOpenExport" style="margin-left: 10px" @click="openRule">
            激活api
          </a-button>
        </div>
        <div class="headInput">
          <a-select class="serchInput" @change="handleSearchChange" :default-value="serchList[0].dataIndex">
            <a-select-option style="" :value="item.dataIndex" v-for="(item ,index ) in serchList" :key="index">
              {{ item.title }}
            </a-select-option>
          </a-select>
          <a-select
            show-search
            :value="serchvalue"
            style="width: 200px;border-radius: 0px "
            @search="handleSearch"
            @change="handleChange"
          >
            <a-select-option style="border-radius: 0px" :value="d.value" v-for="d in serchClickList" :key="d.value">
              {{ d.title }}
            </a-select-option>
          </a-select>
          <a-button icon="search" type="primary">
            查找
          </a-button>

          <a-popover trigger="click" placement="left">
            <template slot="title">
              自定义显示列表
            </template>
            <template slot="content">
              <a-checkbox-group class="checkGroup" :options="checkColums" v-model="hasCheckColums" @change="onChage">
              </a-checkbox-group>
            </template>
            <a-button class="popuerButton" icon="ordered-list" type="primary">
              列表
            </a-button>
          </a-popover>
        </div>
      </div>
      <a-table
        id="components-table-demo-size"
        style="margin-top: 10px"
        :columns="showColums"
        :pagination="false"
        :data-source="tabledata"
        rowKey="id"
        :defaultExpandAllRows="true"
        :row-selection="rowSelection">
        <template slot="name" slot-scope="text,record">
          <span >
            <span style="margin-left: 10px" class="table_name" @click="openDialogName(record)">{{ text }}</span>
          </span>
        </template>
        <template slot="method" slot-scope="text">
          <span >
            <a-tag v-if="text" :color="text | methodFitter">{{ text ? text : '-' }}</a-tag>
          </span>
        </template>
        <template slot="status" slot-scope="text">
          <span >
            <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
          </span>
        </template>
        <template slot="buildOptionText" slot-scope="props">
          <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
          <span v-if="props.value === '50'">全部</span>
        </template>
      </a-table>
    </a-card>

    <auth-panle
      ref="authModal"
      :visible="visible"
      :model="showType"
      :formData="formData"
      @cancel="handleCancel"
    />
  </page-header-wrapper>

</template>

<script>
import authPanle from '@/views/systerm/authComponents/components/authPanle'
import { getRuleList, delRule, settingRule } from '@/api/auth'
const columns = [
  { title: 'api名称', width: 180, dataIndex: 'name', key: '1', fixed: 'left', scopedSlots: { customRender: 'name' } },
  { title: '访问方法', dataIndex: 'method', key: '2', scopedSlots: { customRender: 'method' } },
  { title: '创建时间', dataIndex: 'updateTime', key: '4' },
  { title: '权限api', dataIndex: 'url', key: '8' },
  { title: '状态', dataIndex: 'status', key: '6', scopedSlots: { customRender: 'status' } },
  { title: '备注', dataIndex: 'describe', key: '5' }
]

const methodMap = {
  'post': {
    status: 'pink'
  },
  'put': {
    status: 'orange'
  },
  'get': {
    status: 'green'
  },
  'delete': {
    status: 'red'
  }
}

const statusMap = {
  0: {
    status: 'success',
    text: '正常'
  },
  1: {
    status: 'default',
    text: '关闭'
  }
}

const serchList = [
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '请求方式',
    dataIndex: 'method'
  },
  {
    title: '请求api',
    dataIndex: 'api'
  },
  {
    title: '状态',
    dataIndex: 'status'
  }
]
export default {
  name: 'Agent',
  data () {
    return {
      loading: true,
      tabledata: [],
      columns,
      hasCheckColums: [], // 标示已经选中的
      checkColums: [], // 初始化的check
      selectedRowKeys: [],
      showColums: [],
      isOpenExport: true,
      serchList,
      value: '',
      showType: 0,
      visible: false,
      baseVisible: false, // 详情弹窗控件
      baseType: '', // 详情页面内容控件
      baseAgentId: 0, // 详情页面的id
      hasChildren: false, // 选中路由下级是否存在
      formData: {},
      serchClickList: [],
      serchvalue: '',
      nameSerchList: [],
      urlList: []
    }
  },
  components: {
    authPanle
  },
  filters: {
    methodFitter (type) {
      return methodMap[type].status
    },
    statusFilter (type) {
      return statusMap[type].text
    },
    statusTypeFilter (type) {
      return statusMap[type].status
    }
  },
  activated () {
    this.checkGroupInit()
    this.getMenuListInit()
    const nameSerchList = []
    const urlList = []
    getRuleList({
      page: 1,
      pageSize: 10,
      fold: false
    }).then(res => {
      if (res.code === 200) {
        if (res.data.list.length) {
          res.data.list.map(item => {
            const nameItem = {
              title: item.name,
              value: item.id
            }
           if (item.url) {
             const urlItem = {
               title: item.url,
               value: item.url
             }
             this.checkArray(urlList, urlItem)
           }
            nameSerchList.push(nameItem)
          })
          this.nameSerchList = nameSerchList
          this.urlList = urlList
        }
      }
    })
  },
  computed: {
    rowSelection: function () {
      const t = this
      return {
        onChange: function (selectedRowKeys, selectedRows) {
          if (selectedRowKeys.length > 0) {
            t.isOpenExport = false
            t.selectedRowKeys = selectedRowKeys
          } else {
            t.isOpenExport = true
          }
        }
      }
    }
  },
  methods: {
    checkArray (array, item) {
      for (let i = 0; i < array.length; i += 1) {
        if (array[i].title === item.title) {
          return
        }
      }
      array.push(item)
    },
    getMenuListInit () {
      getRuleList({
        page: 1,
        pageSize: 999,
        fold: true
      }).then(res => {
        this.loading = false
        if (res.code === 200) {
          this.tabledata = res.data.list
        }
      })
    },
    // 路由删除按钮
    deleteRouter () {
      const selectedRowKeys = this.selectedRowKeys
      const t = this
      this.$confirm({
        title: '你确定要删除吗？',
        content: '如果这个路由下存在子路由，删除也会将下方的子路由一并删除！',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          delRule({
            idList: selectedRowKeys
          }).then(res => {
            if (res.code === 200) {
              t.$message.success('删除成功')
              t.getMenuListInit()
              t.isOpenExport = true
            } else {
              t.$message.error('删除失败')
            }
          })
        }
      })
    },
    closeRule () {
      const selectedRowKeys = this.selectedRowKeys
      const t = this
      this.$confirm({
        title: '你确定要暂停吗？？',
        content: '如果这个api下存在子api，暂停也会将下方的子路由一并暂停，所有用户都将不得访问！',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          settingRule({
            idList: selectedRowKeys,
            status: 1
          }).then(res => {
            if (res.code === 200) {
              t.$message.success('暂停成功')
              t.getMenuListInit()
              t.isOpenExport = true
            } else {
              t.$message.error('暂停失败')
            }
          })
        }
      })
    },
    openRule () {
      const selectedRowKeys = this.selectedRowKeys
      const t = this
      this.$confirm({
        title: '你确定要激活吗？？',
        content: '如果这个api下存在子api，激活也会将下方的子路由一并激活！',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          settingRule({
            idList: selectedRowKeys,
            status: 0
          }).then(res => {
            if (res.code === 200) {
              t.$message.success('激活成功')
              t.getMenuListInit()
              t.isOpenExport = false
              t.selectedRowKeys = []
            } else {
              t.$message.error('激活失败')
            }
          })
        }
      })
    },
    checkGroupInit () {
      const columns = this.columns
      const checkColums = []
      const hasCheckColums = []
      const showColums = []
      columns.map(item => {
        const columsItem = {}
        const hasCheckColumsitem = String(item.dataIndex)
        hasCheckColums.push(hasCheckColumsitem)
        showColums.push(item)
        columsItem.label = item.title
        columsItem.value = String(item.dataIndex)
        checkColums.push(columsItem)
      })
      this.hasCheckColums = hasCheckColums
      this.checkColums = checkColums
      this.showColums = showColums
      this.loading = false
    },
    onChage (e) {
      if (e.length !== 0) {
        const columnsArray = []
        for (var i in e) {
          columns.map(item => {
            if (e[i] === item.dataIndex) {
              columnsArray.push(item)
            }
          })
        }
        this.showColums = columnsArray
      }
    },
    handleSearch (value) {
      console.log(value)
    },
    handleChange (value) {
      this.serchvalue = value
    },
    handleOnchage (e) {
      console.log(e)
    },
    /* 表格点击name 函数 */
    openDialogName (e) {
      this.visible = true
      this.showType = 1
      this.$refs.authModal.setData(e)
    },
    /* 新增按钮函数 */
    addUser () {
      this.visible = true
      this.showType = 0
      this.userData = {}
    },
    /* 新增，修改页面回调关闭函数 */
    handleCancel () {
      this.visible = false
      this.showType = 0
      this.getMenuListInit()
    },
    /* 操作 -》 详情 */
    gotoAgentDetails (e) {
      console.log(e)
      // this.visible = true
      // this.baseType = 0
      // this.formData = e
    },
    /* 详情页面关闭回调 */
    handleBaseCancel () {
      this.baseVisible = false
      this.baseType = ''
    },
    handleSearchChange (e) {
      if (e === 'name') {
        this.serchClickList = this.nameSerchList
      } else if (e === 'method') {
        this.serchClickList = [
          {
            title: 'get',
            value: 'get'
          },
          {
            title: 'post',
            value: 'post'
          },
          {
            title: 'put',
            value: 'put'
          },
          {
            title: 'delete',
            value: 'delete'
          }
        ]
      } else if (e === 'api') {
        this.serchClickList = this.urlList
      } else {
        this.serchClickList = [
          {
            title: '开启',
            value: 0
          },
          {
            title: '关闭',
            value: 1
          }
        ]
      }
    }
  }
}
</script>

<style lang='less' scoped>
.table_header{
  button{
    border-radius: 5px;
  }
  .popuerButton{
    margin-left: 20px;
  }
}
.checkGroup{
  width: 120px;
  margin: 10px;
  line-height: 25px
}
.table_name{
  cursor:pointer
}
</style>
